<template>
  <div>
    <el-table
      v-loading="tableConfigs.listLoading"
      element-loading-text="拼命加载中"
      class="mt10 order-table"
      :data="tableData"
      highlight-current-row
      :row-style="rowClass"
      :row-class-name="tableRowClassName"
      v-bind="$attrs"
      @selection-change="handleSelectionChange"
    >
      <!-- 索引 -->
      <el-table-column v-if="tableConfigs.index" type="index" label="#" width="50" align="center" />
      <!-- 择选 -->
      <el-table-column v-if="tableConfigs.selection" fixed type="selection" width="50" />
      <template v-for="colConfig in colConfigs">
        <!-- 1. 插槽 -->
        <slot
          v-if="colConfig.slot && colConfig.show !== false"
          :name="colConfig.slot"
        />
        <!-- 2. 自定义组件 -->
        <!-- <component
          :is="colConfig.component"
          v-else-if="colConfig.component"
          :key="colConfig.prop"
          :col-config="colConfig"
        /> -->
        <!-- 3. 表格操作按钮-->
        <el-table-column
          v-else-if="colConfig && colConfig.options"
          :key="colConfig.prop"
          :width="colConfig.width"
          :label="colConfig.label"
          fixed="right"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="{row, $index}">
            <!-- 带过滤器 -->
            <span v-for="(item, index2) in colConfig.options.filter(item => { return item.filter})" :key="index2 + item.filter.key">
              <el-button
                v-if="item.filter && (row[item.filter.key] === item.filter.value)"
                :type="item.type"
                :icon="item.icon"
                size="mini"
                style="display: inline-block; padding: 0px; "
                @click="handleButton(item.methods, row, $index)"
              >
                {{ item.label }}
              </el-button>
            </span>
            <!-- 不带过滤器 -->
            <span v-for="(item, index2) in colConfig.options.filter(item => { return !item.filter})" :key="index2">
              <el-button
                :type="item.type"
                :icon="item.icon"
                size="mini"
                style="display: inline-block; padding: 0px; "
                @click="handleButton(item.methods, row, $index)"
              >
                {{ item.label }}
              </el-button>
            </span>
          </template>
        </el-table-column>
        <!-- 4. 正常列 -->
        <el-table-column
          v-else-if="colConfig.show !== false"
          :key="colConfig.prop"
          :fixed="colConfig.fixed"
          :min-width="colConfig.minWidth"
          :width="colConfig.width"
          :sortable="colConfig.sortable"
          v-bind="colConfig"
        >
          <!-- 提醒 -->
          <template slot="header">
            {{ colConfig.label }}
            <el-popover
              v-if="colConfig.tips"
              placement="bottom"
              width="300"
              :title="colConfig.label"
              :offset="50"
              trigger="hover"
              :content="colConfig.tips"
            >
              <i slot="reference" class="el-icon-question" style="font-size: 14px; color: #333" />
            </el-popover>
          </template>
          <template slot-scope="scope">
            <!-- 多个渲染值 -->
            <template v-if="colConfig.mutil">
              <div v-for="(item, index) in colConfig.prop" :key="index">
                {{ scope.row[item] }}
              </div>
            </template>
            <!-- 单个渲染值 -->
            <template v-else>
              {{ scope.row[colConfig.prop] || '-' }}
            </template>
            <i v-if="colConfig.operation" :class="colConfig.operation.icon" @click="handleButton(colConfig.operation.methods, scope.row, index)" />
          </template>
        </el-table-column>
      </template>
    </el-table>
    <el-pagination
      v-if="tableConfigs.page"
      class="tar mt20 mb20"
      background
      :current-page="tableConfigs.page.currentPage"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="tableConfigs.page.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableConfigs.page.total"
      @size-change="sizeChange"
      @current-change="currentChange"
    />
  </div>
</template>

<script>
export default {
  name: 'MyTable',
  props: {
    tableConfigs: {
      type: Object,
      default: () => {
        return {
          selection: true,
          pageSize: 20,
          currentPage: 1,
          total: 0
        }
      }
    },
    colConfigs: {
      type: Array,
      default: () => {
        return []
      }
    },
    tableData: {
      type: Array,
      default: () => {
        return []
      }
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      selectedRowIndex: [], // 选中行index
      selectedOrder: [] // 选中行数据
      // page: {
      //   selection: true,
      //   pageSize: 20,
      //   currentPage: 1,
      //   total: 0
      // }
    }
  },
  watch: {
    /**
     * 监听高亮
    */
    selectedOrder(data) {
      this.selectedRowIndex = []
      if (data.length > 0) {
        data.forEach((item, index) => {
          this.selectedRowIndex.push(this.tableData.indexOf(item))
        })
      }
    }
  },
  created() {
  },
  methods: {
    handleButton(methods, row, index, event) {
      this.$emit('handleButton', { 'methods': methods, 'row': row, index })
    },
    tableRowClassName({ row, rowIndex }) {
      return ''
    },
    // 选中筛选结果时候
    handleSelectionChange(rows) {
      this.selectedOrder = rows
      this.$emit('selectionChange', { rows })
    },
    // 多选高亮选中行
    rowClass({ row, rowIndex }) {
      if (this.selectedRowIndex.includes(rowIndex)) {
        return { backgroundColor: 'rgb(192 229 253 / 75%)' }
      }
    },
    /**
		 * 当前页变化
		 */
    currentChange(page) {
      this.tableConfigs.page.currentPage = page
      this.pageChange(this.tableConfigs.page)
    },
    /**
		 * 表格长度变化
		 */
    sizeChange(size) {
      this.tableConfigs.page.currentPage = 1
      this.tableConfigs.page.pageSize = size
      this.pageChange(this.tableConfigs.page)
    },
    filterHandler(value, row, column) {
      this.$emit('filterChange', { value, row, column })
    },
    pageChange(pageParams) {
      this.$emit('pageChange', pageParams)
    }
  }
}
</script>

<style scoped>
  .order-table {
    /* height: calc(100% - 300px); */
  }
</style>
